<template>
    <div class="wrapper">
        <!-- <Chart id="performanceRate" style="width: 500px;height: 400px;" :option="option"></Chart> -->
        <RateChart  :chartData="chartData" :options="options"></RateChart>
    </div>
</template>
  
<script>
import Chart from "@/components/chart/chart.vue";
import { getChartData } from "@/api/echarts";
import RateChart from "../base/rateChart.vue";
export default {
    name: "performanceRate",
    components: { Chart,RateChart },
    props: [],
    data() {
        return {     
            chartData: null,
            options:{
                id:'timeRate',
                // title:"时效履约率"
            }
        };
    },
    mounted() {
        getChartData(
            { "custom_chart_id": "2" }
        ).then(res => {
            const data = res.data.data;
            data.forEach(item => {
                item.value = Math.round(item.value * 100);
;
            });
            this.chartData = data;  
        });

    },
    methods: {
        setOption() {
            this.option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                dataset: [
                    {
                        dimensions: ['name', 'value'],
                        source: this.chartData
                    },

                ],
                title: {
                    text: "时效履约率",
                    textStyle: {
                        fontSize: 14,
                        color: "#333",
                    },
                },
                legend: {
                    show: false
                },
                grid: {
                    top: 24,
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    max: 100
                },
                yAxis: {
                    type: 'category',
                },
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true,
                            position: ['80%', '30%'],
                            formatter: function (params) {
                                return params.value.value+'%';
                            },
                            color:"#333"
                        },
                        itemStyle: {
                            // 设置柱状渐变色
                            // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //   { offset: 0, color: '#83bff6' },

                            //   { offset: 1, color: '#188df0' }
                            // ]),
                            // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: 'rgb(136 155 216)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(77, 119, 255)'
                                }
                            ])

                        },
                        emphasis: {
                            focus: 'series'
                        },
                    },

                ]
            };
        },
    },
};
</script>
<style lang="scss" scoped>
.wrapper {}
</style>
  